<template>
  <el-col>
    <el-dialog
      title="增加"
      :visible.sync="addDialogVisible"
      :before-close="handleCloseAddDialog"
    >
      <el-form
        ref="userInfo"
        :model="userInfo"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="名字" prop="name">
          <el-input v-model="userInfo.name" />
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userInfo.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="userInfo.password" type="password" />
        </el-form-item>
        <el-form-item label="角色等级" prop="roleId">
          <el-select
            v-model="userInfo.roleId"
            type="text"
            placeholder="角色等级"
          >
            <el-option
              v-for="(item, index) in roleList"
              :key="index"
              :label="item.roleName"
              :value="item.roleId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属医院" prop="hospitalId" v-if="hospitalId === 'null'">
          <el-select
            v-model="userInfo.hospitalId"
            placeholder="医院"
            @change="changeHospitalId"
          >
            <el-option
              v-for="(item, index) in hospitalList"
              :key="index"
              :value="item.hospitalId"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属科室" prop="sectionId">
          <el-select v-model="userInfo.sectionId" placeholder="科室">
            <el-option
              v-for="(item, index) in sectionList"
              :key="index"
              :value="item.sectionId"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseAddDialog">取 消</el-button>
        <el-button type="primary" @click="handleConfirmAddDialog"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="更新"
      :visible.sync="updateDialogVisible"
      :before-close="handleCloseUpdateDialog"
    >
      <el-form
        ref="userInfo"
        :model="userInfo"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="名字" prop="name">
          <el-input v-model="userInfo.name" />
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userInfo.username" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="userInfo.password" type="password" />
        </el-form-item>
        <el-form-item label="角色等级" prop="roleId">
          <el-select
            v-model="userInfo.roleId"
            type="text"
            placeholder="角色等级"
          >
            <el-option
              v-for="(item, index) in roleList"
              :key="index"
              :label="item.roleName"
              :value="item.roleId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属医院" prop="hospitalId" v-if="hospitalId === 'null'">
          <el-select
            v-model="userInfo.hospitalId"
            placeholder="医院"
            @change="changeHospitalId"
          >
            <el-option
              v-for="(item, index) in hospitalList"
              :key="index"
              :value="item.hospitalId"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属科室" prop="sectionId">
          <el-select v-model="userInfo.sectionId" placeholder="科室">
            <el-option
              v-for="(item, index) in sectionList"
              :key="index"
              :value="item.sectionId"
              :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseUpdateDialog">取 消</el-button>
        <el-button type="primary" @click="handleConfirmUpdateDialog"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <el-row>
      <el-col :span="2">
        <el-button type="primary" @click="addDialogVisible = true"
          >增加</el-button
        >
      </el-col>

      <el-col :span="2">
        <el-button
          :disabled="multipleSelection.length > 1"
          type="warning"
          @click="showUpdateDialogVisible"
          >更新</el-button
        >
      </el-col>

      <el-col :span="2">
        <el-button type="danger" @click="handleDeleteSelectIds">删除</el-button>
      </el-col>

      <el-col :span="5">
        <el-input v-model="query.name" type="text" placeholder="用户名" />
      </el-col>
      <el-col :span="5">
        <el-input v-model="query.username" type="text" placeholder="用户账号" />
      </el-col>
      <el-col :span="5">
        <el-select
          v-model="query.roleId"
          type="text"
          placeholder="角色等级"
        >
          <el-option
            v-for="(item, index) in roleList"
            :key="index"
            :label="item.roleName"
            :value="item.roleId"
          ></el-option>
        </el-select>
      </el-col>
      <el-col v-if="hospitalId === 'null'" :span="5">
        <el-select
          v-model="query.hospitalId"
          placeholder="医院"
          @change="changeHospitalId"
        >
          <el-option
            v-for="(item, index) in hospitalList"
            :key="index"
            :value="item.hospitalId"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <el-select v-model="query.sectionId" placeholder="科室">
          <el-option
            v-for="(item, index) in sectionList"
            :key="index"
            :value="item.sectionId"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-button @click="queryClear"> 清除 </el-button>
      </el-col>
      <el-col :span="2">
        <el-button @click="doSelectAllUser"> 搜索 </el-button>
      </el-col>
    </el-row>

    <el-table
      ref="multipleTable"
      :data="userList"
      style="width: 100%"
      row-key="userId"
      lazy
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="userId" label="用户 ID" />
      <el-table-column prop="name" label="用户名" />
      <el-table-column prop="username" label="用户账号" />
      <el-table-column prop="loginIp" label="登录IP" />
      <el-table-column prop="loginTime" label="登录时间" />
      <el-table-column prop="roleName" label="角色等级" />
      <el-table-column prop="hospitalName" label="所属医院" />
      <el-table-column prop="sectionName" label="所属科室" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="console.log(scope.row.createTime)"
            >强制下线</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      @prev-click="currentChange"
      @next-click="currentChange"
      @current-change="currentChange"
    />
  </el-col>
</template>

<script>
export default {
  name: "user",
  data() {
    return {
      addDialogVisible: false,
      updateDialogVisible: false,

      userList: [],
      roleList: [],
      hospitalList: [],
      sectionList: [],

      page: 0,
      pageSize: 10,
      total: 0,

      hospitalId: 0,

      rules: {
        name: [{ required: true, trigger: "blur" }],
        username: [{ required: true, trigger: "blur" }],
        roleId: [{ required: true, trigger: "blur" }],
      },

      userInfo: {
        name: "",
        username: "",
        password: "",
        roleId: "",
        hospitalId: "",
        sectionId: "",
      },

      query: {
        name: "",
        username: "",
        roleId: "",
        hospitalId: "",
        sectionId: "",
      },

      multipleSelection: [],
    };
  },
  methods: {
    currentChange(index) {
      this.page = index - 1;
    },

    doSelectAllUser() {
      this.$store
        .dispatch("user/all", {
          obj: {
            name: this.query.name,
            username: this.query.username,
            roleId: this.query.roleId === "" ? 0 : this.query.roleId,
            hospitalId:
              this.query.hospitalId === "" ? 0 : this.query.hospitalId,
            sectionId: this.query.sectionId === "" ? 0 : this.query.sectionId,
          },
          page: this.page,
          pageSize: this.pageSize,
        })
        .then((res) => {
          this.userList = res.list;
          this.total = res.total;
        });
    },
    doSelectAllHospital() {
      this.$store.dispatch("hospital/allId", {}).then((res) => {
        this.hospitalList = res;
      });
    },
    doSelectAllSection(val) {
      this.$store
        .dispatch("section/allId", {
          hospitalId: val,
        })
        .then((res) => {
          this.sectionList = res;
        });
    },
    doSelectAllRole() {
      this.$store
        .dispatch("role/selectAllRole", {
          obj: {
            roleName: "",
          },
          page: this.page,
          pageSize: this.pageSize,
        })
        .then((res) => {
          this.roleList = res.list;
          this.total = res.total;
        });
    },

    changeHospitalId(val) {
      this.userInfo.sectionId = "";
      this.query.sectionId = "";
      this.doSelectAllSection(val);
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    handleCloseAddDialog() {
      this.addDialogVisible = false;
      this.refresh();
    },
    handleConfirmAddDialog() {
      this.$refs.userInfo.validate((valid) => {
        if (valid) {
          this.addDialogVisible = false;
          this.$store.dispatch("user/add", this.userInfo).then(() => {});
        }
      });
      this.refresh();
    },

    showUpdateDialogVisible() {
      if (this.multipleSelection.length === 0) {
        this.$message.error("请选择");
        return;
      }
      this.userInfo = this.multipleSelection[0];
      if (this.userInfo.hospitalId !== '') {
        this.doSelectAllSection(this.userInfo.hospitalId)
      }
      this.updateDialogVisible = true;
    },
    handleCloseUpdateDialog() {
      this.updateDialogVisible = false;
      this.refresh();
    },
    handleConfirmUpdateDialog() {
      console.log(this.userInfo);
      this.$refs.userInfo.validate((valid) => {
        if (valid) {
          this.updateDialogVisible = false;
          this.$store.dispatch("user/update", this.userInfo).then(() => {});
        }
      });
      this.refresh();
    },

    handleDeleteSelectIds() {
      let ids = [];
      for (let obj of this.multipleSelection) {
        ids.push(obj.userId);
      }
      this.$store.dispatch("user/delete", ids).then(() => {});
      location.reload();
    },

    queryClear() {
      this.query = {
        name: "",
        username: "",
        roleId: "",
        hospitalId: this.hospitalId === 'null' ? "" : this.hospitalId,
        sectionId: "",
      };
      this.doSelectAllUser();
    },

    refresh() {
      this.userInfo = {
        name: "",
        username: "",
        password: "",
        roleId: "",
        hospitalId: this.hospitalId === 'null' ? "" : this.hospitalId,
        sectionId: "",
      };
      this.doSelectAllUser();
      this.$refs.multipleTable.clearSelection();
    },
  },
  created() {
    this.hospitalId = localStorage.getItem('hospitalId') === "null" ? 'null' : parseInt(localStorage.getItem('hospitalId'))
    if (this.hospitalId === "null") {
      this.doSelectAllHospital();
    } else {
      this.query.hospitalId = this.hospitalId
      this.doSelectAllSection(this.hospitalId)
    }
    this.doSelectAllUser();
    this.doSelectAllRole();
  },
};
</script>

<style scoped>
</style>
